<template>
  <div class="creation">
    <div class="dd">
      <span>订单编号：</span>
      <div class="input">
        <el-input placeholder="YQ20230215" size="mini"></el-input>
      </div>
      <i class="el-icon-refresh-right"></i>
      <div class="date">创建时间：2022-04-16 23:59</div>
    </div>
    <div class="xx">
      <ul>
        <li class="clotheTime">
          <span>选服时间：</span>
          <div class="input">
            <el-date-picker
              v-model="clotheTime"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
        </li>
        <li class="clotheTime">
          <span>拍摄时间：</span>
          <div class="input">
            <el-date-picker
              v-model="photoTime"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </div>
        </li>
      </ul>
      <div class="xx">
        <ul>
          <li>
            <span>男方姓名：</span>
            <div class="input">
              <el-input size="mini" placeholder="请输入姓名"></el-input>
            </div>
          </li>
          <li>
            <span>女方姓名：</span>
            <div class="input">
              <el-input size="mini" placeholder="请输入姓名"></el-input>
            </div>
          </li>
          <li>
            <span>手机号码：</span>
            <div class="input">
              <el-input size="mini" placeholder="请输入手机号码"></el-input>
            </div>
          </li>
          <li>
            <span>微信号码：</span>
            <div class="input">
              <el-input size="mini" placeholder="微信号|ID"></el-input>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="tx">
      <div class="left">
        <span>选择套系：</span>
        <div class="select">
          <el-select size="mini" v-model="value" placeholder="请选中套系">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="xx">
      <ul>
        <li>
          <span class="graySpan">套系金额：</span>
          <div class="input">
            <el-input size="mini"></el-input>
          </div>
        </li>
        <li>
          <span class="graySpan">服装数量：</span>
          <div class="input">
            <el-input size="mini"></el-input>
          </div>
        </li>
        <li>
          <span class="graySpan">造型数量：</span>
          <div class="input">
            <el-input size="mini"></el-input>
          </div>
        </li>
        <li>
          <span class="graySpan">保底数量：</span>
          <div class="input">
            <el-input size="mini"></el-input>
          </div>
        </li>
        <li>
          <span class="graySpan">入底数量：</span>
          <div class="input">
            <el-input size="mini"></el-input>
          </div>
        </li>
        <li>
          <span class="graySpan">入册数量：</span>
          <div class="input">
            <el-input size="mini"></el-input>
          </div>
        </li>
        <li>
          <span class="graySpan">精修数量：</span>
          <div class="input">
            <el-input size="mini"></el-input>
          </div>
        </li>
        <li>
          <span class="graySpan">相册数量：</span>
          <div class="input">
            <el-input size="mini"></el-input>
          </div>
        </li>
        <li>
          <span class="graySpan">相框数量：</span>
          <div class="input">
            <el-input size="mini"></el-input>
          </div>
        </li>
        <div class="tag">
          <span class="graySpan">拍摄服装：</span>
          <div class="input">
            <el-tag
              :key="tag"
              v-for="(tag, index) in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(index,'clothe')"
            >
              <span
                style="
                  border-right: 1px solid #dedede;
                  padding-right: 3px;
                  color: #002500;
                "
                >{{ index + 1 }}号服装</span
              >
              {{ tag }}
            </el-tag>
            <el-select
              ref="saveTagInput"
              @keyup.enter.native="handleInputConfirm('clothe')"
              @change="handleInputConfirm('clothe')"
              v-if="inputVisible"
              v-model="inputValue"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput('clothe')"
              >+ 服装标签</el-button
            >
          </div>
        </div>
        <div class="tag">
          <span class="graySpan">外景基地：</span>
          <div class="input">
            <el-tag
              :key="tag"
              v-for="(tag, index) in baseTags"
              closable
              :disable-transitions="false"
              @close="handleClose(index,'base')"
            >
              <span
                style="
                  border-right: 1px solid #dedede;
                  padding-right: 3px;
                  color: #002500;
                "
                >{{ index + 1 }}号基地</span
              >
              {{ tag }}
            </el-tag>
            <el-select
              ref="saveTagInput"
              @keyup.enter.native="handleInputConfirm('base')"
              @change="handleInputConfirm('base')"
              v-if="baseVisible"
              v-model="inputValue"
              placeholder="请选择"
            >
              <el-option
                v-for="item in baseOptions"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput('base')"
              >+ 基地标签</el-button
            >
          </div>
        </div>
      </ul>
    </div>
    <div class="xd">
      <ul>
        <li>
          <span>渠道来源：</span>
          <div class="select">
            <el-select size="mini" v-model="value" placeholder="请选择渠道来源">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </li>
        <li>
          <span>折扣来源：</span>
          <div class="input">
            <el-input size="mini" placeholder="请输入折扣金额"></el-input>
          </div>
        </li>
        <li>
          <span>优惠码：</span>
          <div class="input">
            <el-input size="mini" placeholder="请输入优惠码"></el-input>
          </div>
        </li>
        <li>
          <span>优惠券：</span>
          <div class="select">
            <el-select
              size="mini"
              v-model="value"
              placeholder="请选择平台优惠码"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </li>
      </ul>
    </div>

    <div class="sys">
      <div>
        <span>摄影师：</span>
        <div class="select">
          <el-select size="mini" v-model="value" placeholder="请选择摄影师">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        * 套系允许/客户需要才选择
      </div>
      <div>
        <span>化妆师：</span>
        <div class="select">
          <el-select size="mini" v-model="value" placeholder="请选择化妆师">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        * 套系允许/客户需要才选择
      </div>
    </div>

    <!-- 赠送产品 -->
    <div class="cp">
      <div class="left">
        <div class="tit">赠送产品</div>
        <div class="box">
          <div class="left-box">
            <div class="input">
              <el-input
                size="mini"
                placeholder="搜索"
                prefix-icon="el-icon-search"
              ></el-input>
            </div>
            <ul class="list" v-for="i in 3" :key="i">
              <li>
                <div class="subtit">类别A</div>
                <ul class="sublist">
                  <el-checkbox-group v-model="checkList">
                    <li v-for="i in 5" :key="i">
                      <el-checkbox :label="'选项名称' + i"
                        >选项名称{{ i }}</el-checkbox
                      >
                    </li>
                  </el-checkbox-group>
                </ul>
              </li>
            </ul>
          </div>
          <div class="right-box">
            <div class="d1">
              <span class="s1">已选{{ checkList.length }}项</span>
              <span class="s2">清空</span>
            </div>
            <ul>
              <li v-for="itme in checkList" :key="itme">{{ itme }}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="tit">升级产品</div>
        <div class="box">
          <div class="left-box">
            <div class="input">
              <el-input
                size="mini"
                placeholder="搜索"
                prefix-icon="el-icon-search"
              ></el-input>
            </div>
            <ul class="list" v-for="i in 3" :key="i">
              <li>
                <div class="subtit">类别A</div>
                <ul class="sublist">
                  <li v-for="i in 5" :key="i">
                    <el-checkbox>选项名称{{ i }}</el-checkbox>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <div class="right-box">
            <div class="d1">
              <span class="s1">已选2项</span>
              <span class="s2">清空</span>
            </div>
            <ul>
              <li>选项名称2</li>
              <li>选项名称5</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="yxcd">
      <div class="tit">
        <div>
          意向程度：
          <el-select size="mini" v-model="value" placeholder="请选择意向程度">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div>创建人员：孙忆风</div>
        <div>销售人员：博乐</div>
      </div>
      <div class="zt">
        <span>意向状态：</span>
        <div class="text">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </el-input>
        </div>
      </div>
    </div>

    <!-- <div class="bz">
      <span>备注信息：</span>
      <div class="text">
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          v-model="textarea"
        >
        </el-input>
      </div>
    </div> -->

    <div class="button">
      <el-button type="success" size="mini">提交修改</el-button>
      <el-button type="success" size="mini">推送订单</el-button>
      <el-button type="success" size="info">提交订单</el-button>
      <el-button type="success" size="mini">合同操作</el-button>
      <el-button type="success" size="mini">支付差额</el-button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      dynamicTags: [],
      baseTags: [],
      inputVisible: false,
      baseVisible: false,
      inputValue: "",
      baseinputValue: "",
      clotheTime: "",
      photoTime: "",

      options: [
        {
          value: "1",
          label: "主纱",
        },
        {
          value: "2",
          label: "副纱",
        },
        {
          value: "3",
          label: "秀禾",
        },
        {
          value: "4",
          label: "旗袍",
        },
      ],
      baseOptions: [
        {
          value: "1",
          label: "北京",
        },
        {
          value: "2",
          label: "上海",
        },
        {
          value: "3",
          label: "深圳",
        },
        {
          value: "4",
          label: "广州",
        },
      ],
      value: "",
      checkList: [],
      textarea: "",
    };
  },
  methods: {
    handleClose(index, name) {
      if (name == "clothe") {
        this.dynamicTags.splice(index, 1);
      }
      if (name == "base") {
        console.log('ddf',this.baseTags)
        this.baseTags.splice(index, 1);
      }
    },
    showInput(name) {
      if (name == "clothe") {
        this.inputVisible = true;
      }
      if (name == "base") {
        this.baseVisible = true;
      }
    },

    handleInputConfirm(name) {
      let inputValue = this.inputValue;
      if (inputValue) {
        if (name == "clothe") {
          this.dynamicTags.push(inputValue);
          this.inputVisible = false;
        }
        if (name == "base") {
          this.baseTags.push(inputValue);
          this.baseVisible = false;
        }
      }
      this.inputValue = "";
    },
  },
};
</script>

<style scoped lang="less">
/deep/ .el-select {
  padding: 4px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.creation {
  padding: 20px 0;
  font-size: 14px;
  > div {
    padding: 10px 20px;
    // border-bottom: 1px dashed #ccc;
  }
  .dd {
    display: flex;
    align-items: center;
    border-bottom: 1px dashed #ccc;
    padding: 10px 20px;
    span {
      width: 80px;
    }
    .input {
      width: 200px;
    }
    i {
      font-size: 20px;
      margin-left: 5px;
    }
    .date,
    .p {
      margin-left: 92px;
    }
  }
  .xx {
    border-bottom: 1px dashed #ccc;
    ul {
      li {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        span {
          display: block;
          width: 80px;
        }
        .input {
          width: 200px;
        }
      }
    }
  }
  .tx {
    display: flex;
    align-items: flex-start;
    // border-bottom: 1px dashed rebeccapurple;
    .left {
      display: flex;
      align-items: center;
      span {
        display: block;
        width: 80px;
      }
      .select::v-deep {
        width: 200px;
        .el-select {
          width: 100%;
        }
      }
    }
    .right {
      margin-left: 60px;
      line-height: 30px;
    }
  }
  .xd {
    border-bottom: 1px dashed #ccc;
    ul {
      li {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        span {
          width: 80px;
        }
        .input {
          width: 200px;
        }
        .select::v-deep {
          width: 200px;
          .el-select {
            width: 100%;
          }
        }
      }
    }
  }
  .sys {
    border-bottom: 1px dashed #ccc;
    > div {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      font-size: 12px;
      span {
        width: 60px;
        font-size: 14px;
      }
    }
  }

  .cp {
    display: flex;
    .left,
    .right {
      .box {
        display: flex;
        height: 320px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        .left-box {
          height: 100%;
          overflow-y: auto;
          padding: 8px;
          width: 180px;
          &::-webkit-scrollbar {
            width: 3px;
          }
          &::-webkit-scrollbar-thumb {
            width: 3px;
            background: #999;
            border-radius: 20px;
          }
          .subtit {
            color: #999;
            padding: 5px 0;
          }
          .sublist {
            li {
              margin-bottom: 5px;
            }
          }
        }
        .right-box {
          padding: 15px;
          width: 150px;
          border-left: 1px solid #ccc;
          &::-webkit-scrollbar {
            width: 3px;
          }
          &::-webkit-scrollbar-thumb {
            width: 3px;
            background: #999;
            border-radius: 20px;
          }
          .d1 {
            .s1 {
              color: #999;
            }
            .s2 {
              font-size: 15px;
              // font-weight: bold;
              margin-left: 15px;
            }
          }
          > ul {
            margin-top: 20px;
            li {
              margin-bottom: 10px;
              // font-weight: bold;
            }
          }
        }
      }
    }
    .right {
      margin-left: 50px;
    }
  }

  .yxcd {
    > div {
      margin-bottom: 10px;
    }
    .tit {
      display: flex;
      align-items: center;
      > div {
        margin-right: 50px;
      }
    }
    .zt {
      display: flex;
      .text {
        width: 230px;
      }
    }
  }
  .bz {
    display: flex;
    .text {
      width: 230px;
    }
  }
  .button {
    display: flex;
    justify-content: center;
    border: none;
  }
}
.graySpan {
  color: #999;
}
.tag {
  display: flex;
  height: 40px;
  align-items: center;
}
</style>